/**
 * [drawCanvas description]
 * @param  {[type]} id          [canvas id]
 * @param  {[type]} starscolor  [星星颜色]
 * @param  {[type]} starsamount [星星数量]
 * @param  {[type]} starsradius [星星半径比]
 * @param  {[type]} movrange    [星星移动范围(值越大范围越小)]
 * @param  {[type]} speed       [星星移动速度(值越大速度越慢)]
 * @param  {[type]} trailing    [星星拖尾效果(0~1值越小拖尾越明显)]
 * @param  {[boolean]} showStar [星星形状，true为五角星， false为圆]
 * @return {[type]}             [description]
 */
function drawCanvas(id, starscolor, starsamount, starsradius, movrange, speed, trailing, showStar) {
    //宇宙特效  
    "use strict";
    
    var canvas = document.getElementById(id),
        ctx = canvas.getContext('2d'),
        w = canvas.width = window.innerWidth,
        h = canvas.height = window.innerHeight,

        hue = starscolor, //230  
        stars = [],
        count = 0,
        maxStars = starsamount; //星星数量  

    var canvas2 = document.createElement('canvas'),
        ctx2 = canvas2.getContext('2d');
    canvas2.width = 100;
    canvas2.height = 100;
    var half = canvas2.width / 2;

    /*ctx2.fillStyle = gradient2;
    ctx2.beginPath();
    ctx2.arc(half, half, half, 0, Math.PI * 2);
    ctx2.fill();*/

    /**
     * [drawStar description]
     * @param  {[type]} cxt [description]
     * @param  {[type]} x   [圆心坐标x]
     * @param  {[type]} y   [圆心坐标y]
     * @param  {[type]} r   [小圆半径]
     * @param  {[type]} R   [大圆半径]
     * @param  {[type]} rot [旋转角度]
     * @return {[type]}     [description]
     */
    function drawStar(ctx, x, y, r, R, rot ){
        // ctx.fillStyle = gradient2;
        ctx.beginPath();
        for(var i = 0; i < 5; i ++){
            ctx.lineTo( Math.cos( (18 + i*72 - rot)/180 * Math.PI) * R + x,
                        -Math.sin( (18 + i*72 - rot)/180 * Math.PI) * R + y)
            ctx.lineTo( Math.cos( (54 + i*72 - rot)/180 * Math.PI) * r + x,
                        -Math.sin( (54 + i*72 - rot)/180 * Math.PI) * r + y)
        }
        ctx.closePath();
        ctx.lineWidth = 1;
        ctx.fillStyle = "rgba(0, 255, 255, 0.8)";
        ctx.strokeStyle = "#0af";
        ctx.lineJoin = "round";

        ctx.fill();
        ctx.stroke();
    }

    function drawCircle() {

    }
    // drawStar(ctx2, half,  half, half, half/2, Math.floor(Math.random()*361))

    if(showStar) {
        drawStar(ctx2, half,  half, half, half/3, Math.floor(Math.random()*361))
    } else {
        var gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
        gradient2.addColorStop(0.35, '#0ff');
        gradient2.addColorStop(1, 'transparent');
        ctx2.fillStyle = gradient2;
        ctx2.beginPath();
        ctx2.arc(half, half, half, 0, Math.PI * 2);
        ctx2.fill()
    }
    // End cache  

    function random(min, max) {
        if (arguments.length < 2) {
            max = min;
            min = 0;
        }

        if (min > max) {
            var hold = max;
            max = min;
            min = hold;
        }

        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    function maxOrbit(x, y) {
        var max = Math.max(x, y),
            diameter = Math.round(Math.sqrt(max * max + max * max));
        return diameter / movrange;
        //星星移动范围，值越大范围越小，  
    }

    var Star = function() {

        this.orbitRadius = random(maxOrbit(w, h));
        var radius = random(starsradius, this.orbitRadius) / 50
        this.radius = radius < 3 ? 3 : radius > 16 ? 16 : radius
        // console.log(radius)

        //星星半径大小  
        this.orbitX = w / 2;
        this.orbitY = h / 2;
        this.timePassed = random(0, maxStars);
        this.speed = random(this.orbitRadius) / speed;
        //星星移动速度  
        this.alpha = random(2, 10) / 10;

        count++;
        stars[count] = this;
    }

    Star.prototype.draw = function() {
        var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
            y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
            twinkle = random(10);

        /*if (twinkle === 1 && this.alpha > 0) {
            this.alpha -= 0.05;
        } else if (twinkle === 2 && this.alpha < 1) {
            this.alpha += 0.05;
        }*/

        ctx.globalAlpha = this.alpha;
        ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
        this.timePassed += this.speed;
    }

    for (var i = 0; i < maxStars; i++) {
        new Star();
    }

    function animation() {
        ctx.clearRect(0, 0, w, h)
        ctx.globalCompositeOperation = 'source-over';
        ctx.globalAlpha = trailing; //尾巴  
        // ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)';
        ctx.fillStyle = 'rgba(0, 0, 0, 0)';
        ctx.fillRect(0, 0, w, h)

        ctx.globalCompositeOperation = 'lighter';
        for (var i = 1, l = stars.length; i < l; i++) {
            stars[i].draw();
        };

        window.requestAnimationFrame(animation);
    }

    animation();
}
drawCanvas("starsCanvas",230,800,60, 2.5,1000000,0.5)
window.addEventListener('resize',function(){
	drawCanvas("starsCanvas",230,800,60, 2.5,1000000,0.5)
})

